<template>
  <Dialog
    title="声明"
    width="540px"
    @closed="handleDialogClosed"
    @open="handleDialogOpen"
    @handle-confirm="handleConfirm"
  >
    <div
      v-loading="isLoading"
    >
      <el-form
        :inline="true"
        :model="addForm"
        label-position="top"
        class="addForm"
      >
        <el-form-item label="类型">
          <el-select
            v-model="addForm.claimType"
            placeholder="类型"
          >
            <el-option
              v-for="item in claimTypes"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="Value">
          <el-input
            v-model="addForm.claimValue"
            placeholder="Value"
          />
        </el-form-item>
        <el-form-item
          class="addButton"
          label=""
        >
          <div @click="handleInsertClaim">
            添加声明
          </div>
        </el-form-item>
      </el-form>
      <div class="claimForm">
        <div
          v-for="(claim, index) in claimForm"
          :key="index"
          class="item"
        >
          <el-input
            v-model="claim.claimValue"
          >
            <template #prepend>
              {{ claim.claimType }}
            </template>
            <template #suffix>
              <div
                class="deleteButton"
                @click="handleDelete(index)"
              >
                删除
              </div>
            </template>
          </el-input>
        </div>
      </div>
    </div>
  </Dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Dialog from '@/components/Dialog/index.vue'
import { IClaimType } from '@/http/types/claimTypes'
import { ElMessage } from 'element-plus'

const props = defineProps({
  editId: {
    type: String,
    required: true
  },
  getAllClaimTypes: {
    type: Function,
    required: true
  },
  getCurrentClaims: {
    type: Function,
    required: true
  },
  setClaims: {
    type: Function,
    required: true
  },
  idKey: {
    type: String,
    required: true
  }
})
interface EmitsType {
  (e: 'update:editId', value: string): void
  (e: 'success'): void
}
const emit = defineEmits<EmitsType>()

const isLoading = ref(false)

const addForm = ref({
  claimType: '',
  claimValue: ''
})

const claimTypes = ref<IClaimType[]>([])

const handleDialogClosed = () => {
  emit('update:editId', '')
}
const handleDialogOpen = () => {
  isLoading.value = true
  Promise.all([initAllClaimTypes(), initCurrentClaims()]).finally(() => {
    isLoading.value = false
  })
}

const claimForm = ref<{
  id: string
  claimType: string
  claimValue:string
}[]>([])

const handleInsertClaim = () => {
  if (!addForm.value.claimType || !addForm.value.claimValue) return
  claimForm.value.push({
    claimType: addForm.value.claimType,
    claimValue: addForm.value.claimValue,
    id: props.editId
  })
  addForm.value = {
    claimType: '',
    claimValue: ''
  }
}
const handleDelete = (index:number) => {
  claimForm.value.splice(index, 1)
}
const handleConfirm = async () => {
  isLoading.value = true
  await props.setClaims(props.editId, claimForm.value.map(item => {
    return {
      [props.idKey]: item.id,
      claimType: item.claimType,
      claimValue: item.claimValue
    }
  }))
  isLoading.value = false
  ElMessage.success('保存成功')
  emit('success')
}

const initAllClaimTypes = async () => {
  const res = await props.getAllClaimTypes()
  claimTypes.value = res
}
const initCurrentClaims = async () => {
  const res = await props.getCurrentClaims(props.editId)
  claimForm.value = res.map((item:any) => {
    return {
      id: item[props.idKey],
      claimType: item.claimType,
      claimValue: item.claimValue
    }
  })
}
</script>

<style lang="scss" scoped>
.addForm{
  display: flex;
  justify-content: space-between;
  align-items: center;
  .el-form-item{
    margin-right: 0;
    width: 48%;
    &.addButton{
      width: 100%;
      div{
        width: 100%;
        height: 42px;
        background-color: #67C23A;
        color: #fff;
        text-align: center;
        line-height: 42px;
        cursor: pointer;
        box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, .04), 0px 8px 20px rgba(0, 0, 0, .08);;
        &:hover{
        background-color: #529b2e;
        }
      }
    }
  }
}
.claimForm{
  .item{
    height: 42px;
    .deleteButton{
      width: 80px;
      height: 32px;
      background-color: #771039;
      color: #fff;
      text-align: center;
      line-height: 32px;
      cursor: pointer;
      &:hover{
        background-color: #41091f;
      }
    }
    :deep(.el-input){
      .el-input-group__prepend{
        width: 30%;
      }
      .el-input__inner{
        padding-right: 80px;
      }
      .el-input__suffix{
        right: 0;
      }
    }
  }
}
</style>
